<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>首页</title>
    <link rel="stylesheet" th:href="@{./css/bootstrap.min.css}">
    <script th:src="@{./js/jquery-3.4.1.min.js}"></script>
    <script th:src="@{./js//bootstrap.min.js}"></script>
</head>
<style>
    .intro {
        /* width: 100%; */
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    a:hover {
        text-decoration: none
    }
</style>

<body>
<div class="container" style="width: 1000px">
    <div class="row clearfix">
        <div class="col-md-12 column">
            <nav class="navbar navbar-default" role="navigation">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse"
                            data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle
								navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span
                            class="icon-bar"></span></button>
                    <a class="navbar-brand" href="#">幸福博客首页</a>
                </div>

                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav">
                        <li class="active">
                            <a href="#">首页</a>
                        </li>
                        <li>
                            <a href="/hot">热门文章</a>
                        </li>
                        <li>
                            <a href="/new">最新</a>
                        </li>
                        <li>
                            <a href="#">标签</a>
                        </li>
                    </ul>
                    <form action="/search" method="post" class="navbar-form navbar-left" role="search">
                        <div class="form-group">
                            <input type="text" name="title" class="form-control"/>
                        </div>
                        <button type="submit" class="btn btn-default">搜索</button>
                    </form>
                    <ul class="nav navbar-nav navbar-right">
                        <li th:if="${user}==null"  >
                            <a href="/loginPage">登录</a>
                        </li>
                        <li th:if="${user}!=null" >
                            <a href="/personal">个人中心</a>
                        </li>
                        <li th:if="${user}!=null" >
                            <a th:text="'欢迎：'+${user.username}"> </a>
                        </li>
                        <li class="dropdown" th:if="${user}!=null" >
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">设置<strong
                                    class="caret"></strong></a>
                            <ul class="dropdown-menu">
                                <li>
                                    <a href="#">个人信息</a>
                                </li>
                                <li>
                                    <a href="logout">退出</a>
                                </li>

                            </ul>
                        </li>
                    </ul>
                </div>

            </nav>

            <div class="carousel slide" id="carousel-61558">
                <ol class="carousel-indicators">
                    <li class="active" data-slide-to="0" data-target="#carousel-61558">
                    </li>
                    <li data-slide-to="1" data-target="#carousel-61558">
                    </li>
                    <li data-slide-to="2" data-target="#carousel-61558">
                    </li>
                </ol>
                <div class="carousel-inner"  >
					<div class="item active">
						<a href="#">
							<img  th:src="${ad[0].img}" />
							<div class="carousel-caption">
								<h4 th:text="${ad[0].headline}"></h4>
								<p th:text="${ad[0].content}">  </p>
							</div>
						</a>
					</div>
					<div class="item">
						<a href="#">
							<img  th:src="${ad[1].img}" />
							<div class="carousel-caption">
								<h4 th:text="${ad[1].headline}"></h4>
								<p th:text="${ad[1].content}">  </p>
							</div>
						</a>
					</div>
					<div class="item">
						<a href="#">
							<img  th:src="${ad[2].img}" />
							<div class="carousel-caption">
								<h4 th:text="${ad[2].headline}"></h4>
								<p th:text="${ad[2].content}">  </p>
							</div>
						</a>
					</div>

                </div>
                <a class="left carousel-control" href="#carousel-61558" data-slide="prev"><span
                        class="glyphicon glyphicon-chevron-left"></span></a> <a class="right carousel-control"
                                                                                href="#carousel-61558"
                                                                                data-slide="next"><span
                    class="glyphicon glyphicon-chevron-right"></span></a>
            </div>


            <div class="row clearfix" style="margin-top: 20px;">
                <div class="col-md-12 column">
                    <div class="media" th:each="blog:${blog}">
                        <div class="media-body">
                            <h4 class="media-heading">
                                <a th:href="@{/ViewBlog(id=${blog.id})}"  style="color: rgb(99, 96, 87);;" th:text="${blog.title}"> </a>
                            </h4>
                            <p class="intro"> <a th:href="@{/ViewBlog(id=${blog.id})}"  th:text="${blog.description}" style="color: rgb(99, 96, 87);">  </a> </p>
                            <span class="glyphicon glyphicon-user" style="color: rgb(99, 96, 87); margin:0 10px;" th:text="' '+${blog.author}">  </span>
                            <span class="glyphicon glyphicon-comment" style="color: rgb(99, 96, 87);margin: 0 10px;float: right;" th:text="' 评论'+${blog.click}"> </span>
                            <span class="glyphicon glyphicon-thumbs-up" style="  color: rgb(99, 96, 87);;margin:0 10px;float: right;" th:text="' '+${blog.click}"> </span>
                            <span class="glyphicon glyphicon-eye-open" style="color: rgb(99, 96, 87);margin:0 10px;float: right;" th:text="' '+${blog.view}"> </span>
							<span class="glyphicon glyphicon-calendar" style="color: rgb(99, 96, 87);margin: 0 10px;float: right;" th:text="' '+${blog.time}"> </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


</body>

</html>